<template>
  <div>
    <dv-scroll-board :config="config" class="table" style="height:21vh" />
  </div>
</template>

<script>
// import moment from 'moment'
import { bnrQuery } from '../../api/dataApi'
export default {
  name: '',
  data() {
    return {
      config: {
        header: ['订单号', '未齐套物料', '需求', '库存'],
        headerHeight: 18,
        data: [],
        index: false,
        columnWidth: [120, 140, 100, 100],
        align: ['left'],
        headerBGC: ' ',
        // headerBGC: '#06144f',
        // oddRowBGC: '#06144f',
        oddRowBGC: ' ',
        // evenRowBGC: '#15235c',
        evenRowBGC: 'rgba(52,99,171,0.15)',
        waitTime: '5000',
        rowNum: 6,
      },
      dataList: [],
    }
  },
  mounted() {
    this.getData()
  },
  // watch: {
  //   dataList(newData) {
  //     this.config = {}
  //   },
  // },

  methods: {
    setDataStyle() {
      const _vdata = [...this.dataList],
        _vDataTemp = []
      _vdata.forEach((vItem) => {
        const _c = []
        vItem.forEach((vdItem) => {
          _c.push(`<span style="color:'#ff0000">${vdItem}</span>`)
        })
        _vDataTemp.push(_c)
      })
      this.config = {
        ...this.config,
        data: _vDataTemp,
      }
    },
    getData() {
      const that = this
      const header = {}
      header['report.tableid'] = 'main@prod_wqttj'
      header['cj'] = this.$route.query.cj
      const params = {
        '@params': JSON.stringify(header),
        // pageSize: 10000,
        pageSize: 99999,
        pageIndex: 0,
        sortField: 'id',
        sortOrder: 'desc',
      }
      bnrQuery(params)
        .then((res) => {
          this.qThree(res.data)
          this.setDataStyle()
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    qThree(reportData) {
      const _reportData = []
      reportData.forEach((reportItem) => {
        const _m = []
        _m.push(reportItem.ddh)
        _m.push(reportItem.wqtwl)
        _m.push(reportItem.xq)
        _m.push(reportItem.kc)
        _reportData.push(_m)
      })
      this.dataList = _reportData
    },
  },
}
</script>

<style lang="less" scoped>
.tit {
  .px2font(17);
  .px2vh(padding-top, 15);
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
}
.table-list {
  position: relative;
}
.circle {
  width: 1rem;
  height: 1rem;
  border-radius: 20px;
  display: inline-block;
  margin-right: 5px;
}

.table {
  .px2vw(padding-left, 10);
  .px2vw(padding-right, 10);
}
</style>
